import React from 'react';
import { Box, Typography } from '@mui/material';
import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';

// eslint-disable-next-line no-unused-vars
export const FeaturesSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, listItemSx }) => {
  return (
    <Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <BuildOutlinedIcon sx={iconSx} />
        <Typography sx={largeHeaderSx}>
          Your Users Get
        </Typography>
      </Box>
      
      <Typography sx={listItemSx}>
        Streamlined subscription management with Stripe integration. Handles trial periods, plan changes, payment processing (3D Secure enabled), and customer notifications automatically.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' } }}>
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Accounts & Subdomains
          </Typography>
          <Typography sx={listItemSx}>
            Custom subdomain creation and management for each client account.
          </Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Subscription Management
          </Typography>
          <Typography sx={listItemSx}>
            Complete Stripe integration for recurring payment handling.
          </Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Frictionless Trials
          </Typography>
          <Typography sx={listItemSx}>
            No-commitment trial periods without credit card requirements.
          </Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            User Authentication
          </Typography>
          <Typography sx={listItemSx}>
            Secure login, registration and password management flows.
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};